<template>
	<view>
		<cu-custom title="账单明细" ></cu-custom>
		<view class="form-detail" >
			<view class="l-m-b l-m-l">
				
				<view class="uni-list-cell-db">
									<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
										<view class="uni-input">{{date}}</view>
									</picker>
								</view>
			</view>
			<view class="l-m-b l-m-r">
				<uni-icons type="bottom" size="44rpx" color='#333'></uni-icons>
				<!-- <u-icon name="bottom" size="34rpx" color='#333'></u-icon> -->
			</view>
			
		</view>
		<view class=" c-l m-t-10">
			<view class="zz-list h-80  b-g-w  p-15 p-b-1">
				<view class="f-l">
					<u-avatar size="110rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" class="avatar"></u-avatar>
				</view>
				<view class="list-zd f-l">
					<view class="zz-text f-s-18">转账-来自圆圆</view>
					<text>2023-03-15 10:00</text>
				</view>
				<view class="f-r">
					<view class="c-red f-s-18 m-b-10">+￥680</view>
					<text>零钱余额</text>
				</view>
				
			</view>
			<view class="zz-list h-80  b-g-w  p-15 p-b-1 c-l">
				<view class="f-l">
					<u-avatar size="110rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" class="avatar"></u-avatar>
				</view>
				<view class="list-zd f-l">
					<view class="zz-text f-s-18">转账-来自圆圆</view>
					<text>2023-03-15 10:00</text>
				</view>
				<view class="f-r">
					<view class=" f-s-18 m-b-10">-￥680</view>
					<text>零钱余额</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				index: 0,
				date: currentDate,
				
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
				// bindPickerChange: function(e) {
				// 	console.log('picker发送选择改变，携带值为', e.detail.value)
				// 	this.index = e.detail.value
				// },
				bindDateChange: function(e) {
					this.date = e.detail.value
				},
				// bindTimeChange: function(e) {
				// 	this.time = e.detail.value
				// },
				getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();

					if (type === 'start') {
						year = year - 60;
					} else if (type === 'end') {
						year = year + 2;
					}
					month = month > 9 ? month : '0' + month;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
				}
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
.form-detail{ height: 50px; line-height: 50px;
input{ text-align: right; height: 50px; line-height: 50px;}
}
.l-m-b{ display: flex; 
uni-image{ max-height: 35rpx;max-width: 40rpx; margin-top: 30rpx;}
}
.form-detail{ background: #fff; font-size: 32rpx; border-bottom: 1px solid #f8f8f8;  height: 98rpx; line-height: 98rpx;}
.l-m-l{ float: left; padding-left: 35rpx; font-weight: bold;}
.l-m-r{ float: right; padding-right: 35rpx; height: 98rpx; line-height: 98rpx;  text-align: right; display: ;}
uni-image>div, uni-image>img{ height: 15rpx !important; width: 15rpx !important;}
.list-zd{ width: 40%; padding-left: 15px;
.zz-text{ font-weight: bold; margin-bottom: 10px;}
text{ color: #aaa;}
}
.zz-list{ height: 80px; border-bottom: 1px solid #f4f4f4;}
.c-red{color: #ea3457;}

</style>
